<template>
  <div>
    <!-- 航班搜索界面 -->
    <div v-if="activeTab === 'domestic'" class="flight-search">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-radio-group v-model="tripType">
            <el-radio label="单程">单程</el-radio>
            <el-radio label="往返">往返</el-radio>
            <el-radio label="多程(含缺口程)">多程(含缺口程)</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="search-fields">
        <el-col :span="6">
          <el-form-item label="出发地">
            <el-input v-model="cfcity" placeholder="请输入出发地" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目的地">
            <el-input v-model="ddcity" placeholder="请输入目的地" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出发日期">
            <el-date-picker v-model="departureDate" type="date" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="添加返程">
            <el-button type="text">+ 添加返程</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="additional-options">
        <el-col :span="6">
          <el-checkbox v-model="directFlight">仅看直飞</el-checkbox>
        </el-col>
        <el-col :span="6">
          <el-select v-model="cabinClass" placeholder="选择舱位">
            <el-option label="经济/超经济舱" value="economy"></el-option>
            <el-option label="商务舱" value="business"></el-option>
            <el-option label="头等舱" value="first"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-form-item label="乘客类型">
            <el-select v-model="passengerType" placeholder="选择乘客类型" @change="customPassengerType = ''">
              <el-option v-for="option in defaultPassengerTypes" :key="option.value" :label="option.label" :value="option.value"></el-option>
              <el-option label="自定义" value="custom"></el-option>
            </el-select>
            <el-input v-if="passengerType === 'custom'" v-model="customPassengerType" placeholder="请输入乘客类型" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="search-button">
          <el-button type="primary" @click="searchFlights">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 其他Tab内容 -->
    <div v-else>
      <h2>{{ activeTab }}</h2>
      <!-- 在这里添加其他Tab的内容 -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 当前激活的Tab
const activeTab = ref('domestic')

// 定义表单字段
const tripType = ref('单程')
const cfcity = ref('')
const ddcity = ref('')
const departureDate = ref(null)
const returnDate = ref(null)
const directFlight = ref(false)
const cabinClass = ref('economy')

// 乘客类型相关字段
const defaultPassengerTypes = [
  { label: '1成人 0儿童 0婴儿', value: '1成人 0儿童 0婴儿' },
  { label: '2成人 0儿童 0婴儿', value: '2成人 0儿童 0婴儿' }
]
const passengerType = ref(defaultPassengerTypes[0].value)
const customPassengerType = ref('')

const router = useRouter()
const flight = ref({});
const goToPlanOrder = (flight) => {
  router.push({
    name: 'PlanOrder',
    query: {
      cfcity: flight.cfcity,
      ddcity: flight.ddcity
    }
  });
};

// 搜索航班函数
const searchFlights = () => {
  const passengerTypeValue = passengerType.value === 'custom' ? customPassengerType.value : passengerType.value
  console.log({
    tripType: tripType.value,
    cfcity: cfcity.value,
    ddcity: ddcity.value,
    departureDate: departureDate.value,
    returnDate: returnDate.value,
    directFlight: directFlight.value,
    cabinClass: cabinClass.value,
    passengerType: passengerTypeValue,
  })
  // 在这里添加你的搜索逻辑，比如调用API或跳转到搜索结果页面

  flight.value = {
    cfcity: cfcity.value,
    ddcity: ddcity.value
  };

  console.log("获取的航班记录："+flight.value)
  goToPlanOrder(flight.value)
}
</script>

<style scoped>
.navigation-buttons {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}
.flight-search {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.search-fields {
  margin-top: 20px;
}
.additional-options {
  margin-top: 20px;
}
.search-button {
  text-align: center;
  margin-top: 20px;
}
</style>
